import React from 'react';
import { connect } from 'dva';
import { Layout, Button, Typography , Input, Row, Col, message} from 'antd';
import { Form } from '@ant-design/compatible';
import moment from 'moment'
import BaseComponent from 'components/BaseComponent';
import './index.less';
const { Content } = Layout;
import { updateUser } from '../service'
import $$ from 'cmn-utils'
import md5 from 'js-md5'

const { Title } = Typography
const createForm = Form.create;
@connect(({ courseware }) => ({
  courseware
}))
class SystemManage extends BaseComponent {
  constructor (props) {
    super(props)

    this.state = {
      user: $$.getStore('user')
    }
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      
      if (!err) {
        if(!values['userName']) {
          message.error('登录名为空!')
        }
        if(!values['name']) {
          message.error('用户名为空!')
        }
        delete values.userName
        if(values.password) {
          values.password=md5(values.password)
        }
        updateUser(values).then(resp => {
          if (resp && resp.status && resp.data) {
            message.success('修改成功')
            $$.removeStore('user')
            window.location.replace("/sign/login")
          } else {
            message.error('修改失败')
          }
        }).catch(err => {
          console.log('修改失败:', err)
        })
      }
    })
  }

  render() {
    const { user } = this.state
    const { form } = this.props
    const { getFieldDecorator } = form

    const formItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    }

    const buttonItemLayout = {
      wrapperCol: {
        span: 14,
        offset: 0,
      },
    }

    return (
      <Layout className="full-layout page coursewareManage-page">
        <Content>
          <Title level={2}>修改用户信息</Title>
          <Form
            {...formItemLayout}
            layout={'horizontal'}
            onSubmit={this.handleSubmit}
            name="user_info"
          >
            <Row>
              <Col span={8}>
              <Form.Item
                  label="登录名"
                  name="id"
                  hidden
                >
                  {getFieldDecorator('id', {initialValue: user.id || ''})(<Input disabled />) }
                </Form.Item>
                <Form.Item
                  label="登录名"
                  name="userName"
                  rules={[{ required: true, message: '请输入账号!' }]}
                  style={{marginBottom: '20px'}}
                >
                  {getFieldDecorator('userName', {initialValue: user.userName || ''})(<Input disabled />) }
                </Form.Item>
                <Form.Item
                  label="用户名"
                  name="name"
                  rules={[{ required: true, message: '姓名必填!' }]}
                  style={{marginBottom: '20px'}}
                >
                  {getFieldDecorator('name', {initialValue: user.name || ''})(<Input />) }
                </Form.Item>
                <Form.Item
                  label="密码"
                  name="password"
                  rules={[{ required: true, message: '请输入密码!' }]}
                  style={{marginBottom: '20px'}}
                >
                  {getFieldDecorator('password', {initialValue: ''})(<Input type={'password'} placeholder="密码不填表示不修改" />) }
                </Form.Item>
              </Col>
            </Row>
            
            <Form.Item {...buttonItemLayout}>
              <Button type="primary" htmlType="submit">
                修改
              </Button>
            </Form.Item>
          </Form>
        </Content>
      </Layout>
    )
  }
}

export default createForm()(SystemManage);
